.design-container-root {
  text-align: initial;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  //height: 100vh;
  font-size: 13px;

  .my-aside {
    border-right: 1px solid rgb(233, 233, 233);
    background: rgb(248, 248, 248);
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    //width: 181px;
  }

  .my-main {
    //--el-main-padding: 20px;
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
  }
}

.el-tabs--border-card > .el-tabs__content {
  padding: 5px !important;
}

.user-select-none {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}

.display-flex {
  display: flex;
}

.display-flex-wrap {
  flex-wrap: wrap;
}

.display-flex-column {
  display: flex;
  flex-direction: column;
}

.space-between {
  justify-content: space-between;
}

.display-block {
  display: block;
}

.padding-top-10 {
  padding-top: 10px;
}

.num-2 {
  width: 80px;
}

.num-4 {
  width: 40px !important;
}

.width-100-p {
  width: 100%;
}

.height-100-p {
  height: 100%;
}

//.el-scrollbar {
//  overflow: visible !important;
//}

.width-20 {
  width: var(--20px) !important;
}

.width-40 {
  width: var(--40px) !important;
}

.width-60 {
  width: var(--60px) !important;
}

.width-65 {
  width: var(--65px) !important;
}

.width-66 {
  width: var(--66px) !important;
}

.width-80 {
  width: var(--80px) !important;
}

.width-100 {
  width: var(--100px) !important;
}

.width-120 {
  width: var(--120px) !important;
}

.width-140 {
  width: var(--140px) !important;
}

.width-150 {
  width: var(--150px) !important;
}

.width-160 {
  width: var(--160px) !important;
}

.width-180 {
  width: 180px !important;
}

.width-240 {
  width: var(--240px) !important;
}

.my-hidden {
  visibility: hidden;
}

.cursor-nwse-resize {
  cursor: nwse-resize;
}

//.cursor-resize[data-rotation="90"] {
//  //cursor: ns-resize;
//  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" ><path d="M 16,5 L 12,10 L 14.5,10 L 14.5,22 L 12,22 L 16,27 L 20,22 L 17.5,22 L 17.5,10 L 20, 10 L 16,5 Z" stroke-linejoin="round" stroke-width="1.2" fill="black" stroke="white" style="transform:rotate(0deg);transform-origin: 16px 16px"></path></svg>') 16 16, nwse-resize
//}

@for $rotation from 0 through 165 {
  .cursor-resize[data-rotation="#{$rotation}"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" ><path d="M 16,5 L 12,10 L 14.5,10 L 14.5,22 L 12,22 L 16,27 L 20,22 L 17.5,22 L 17.5,10 L 20, 10 L 16,5 Z" stroke-linejoin="round" stroke-width="1.2" fill="black" stroke="white" style="transform:rotate(#{$rotation}deg);transform-origin: 16px 16px"></path></svg>') 16 16, nwse-resize !important;
  }
}

.cursor-resize[data-rotation="rotate"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" ><path d="M7.9,15.1c-4,0-7.3-3.3-7.3-7.3s3.3-7.3,7.3-7.3c1.7,0,3.4,0.6,4.7,1.7l0.9-0.9c0.2-0.2,0.4-0.3,0.7-0.3   c0.1,0,0.3,0,0.4,0.1c0.4,0.2,0.6,0.5,0.6,0.9v4c0,0.5-0.4,1-1,1h-4c-0.4,0-0.7-0.2-0.9-0.6C9.1,6.2,9.2,5.7,9.5,5.5l0.9-0.9   C9.7,4,8.8,3.7,7.9,3.7c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2c1.3,0,2.5-0.6,3.3-1.6c0.1-0.1,0.3-0.2,0.5-0.3c0,0,0,0,0,0   c0.2,0,0.4,0.1,0.5,0.2l1.2,1.3c0.2,0.2,0.3,0.6,0,0.9C12.1,14.2,10,15.1,7.9,15.1z" stroke-linejoin="round" stroke-width="1.2" stroke="white" fill="black"></path></svg>') 10 10, alias !important;
}

.cursor-resize[data-rotation="move"] {
  cursor: move !important;
}

.cursor-resize[data-rotation="col-resize"] {
  cursor: col-resize !important;
}

.cursor-resize[data-rotation="ns-resize"] {
  cursor: ns-resize !important;
}

.cursor-move {
  cursor: move;
}

.cursor-pointer {
  cursor: pointer;
}

.pointer-events {
  pointer-events: none;
}

.my-icon-disabled {
  //opacity: 0.5;
  color: var(--icon-disable-color) !important;
  cursor: not-allowed !important;
}

.my-handle-panel-icon {
  font-size: 16px !important;
  height: 16px !important;
  width: 16px !important;
  margin: 2px 10px 2px 2px;
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  border-radius: 3px;

  &:hover {
    background: white;
    color: var(--drag-h-color);
  }
}

.sort-tips-line {
  width: 1px;
  height: 100px;
  background: red;
  position: absolute;
  top: 0;
}

.my-print-border-box {
  box-sizing: border-box;
}

.drag-wrapper {
  position: absolute;
  background: #f0f2f5;
  //background: gray;
  border: 1px solid gray;
}
